<script lang='ts' setup>
import { reactive, } from 'vue'

const state = reactive({
    tableData: [
        {
            id: 222,
            orderCode: '2254455412',
            userName: '阿加',
            six: '女',
            age: 22,
            phone: '15896354789',
            orderPrice: 3651,
            paymentPrice: 5645,
            debtPrice: '欠款金额66',
            buyCount: 23,
            buyTime: '2023-12-13 10:23:54'
        }
    ]
})

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,
    statistics: number
}>(), {
    statistics: 1
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const pageNation = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0
})

/**
 * 分页函数
 */
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="购买卡项详情" @close="closeDialog" style="width: 1300px;">
            <el-table :data="state.tableData" style="width: 100%">
				<el-table-column label="订单编号" prop="orderCode" />
				<el-table-column label="用户名" prop="userName" />
				<el-table-column label="性别" prop="six" />
				<el-table-column label="年龄" prop="age" /> 
				<el-table-column label="用户手机" prop="phone" width="120" /> 
				<el-table-column label="订单金额" prop="orderPrice" /> 
				<el-table-column label="付款金额" prop="paymentPrice" /> 
				<el-table-column label="欠款金额" prop="debtPrice" /> 
				<el-table-column label="购买数量" prop="buyCount" /> 
				<el-table-column label="购买时间" prop="buyTime" width="200" />  
				
				<!-- <el-table-column label="操作" v-if="props.statistics === 1">
					<template #default="scope">
						<el-link :underline="false" type="primary" @click="previewInfo(scope.row.id)">查看详情</el-link>
					</template>
				</el-table-column> -->
			</el-table>

            <section class="mt15">
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination
						v-model:current-page="pageNation.pageNum"
						v-model:page-size="pageNation.pageSize"
						:page-sizes="[10, 20, 30]"  
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageNation.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
					</el-col>
				</el-row> 
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>

</style>